<!--
 * @Author: LiuYan
 * @Date: 2022-12-17 13:38:50
 * @LastEditors: LiuYan
 * @LastEditTime: 2022-12-20 15:53:57
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./common/css/coommon.css" />
    <title>Document</title>
    <style>
      .body {
        padding: 0 !important;
        overflow: hidden;
      }
      .body .table-body {
        height: 355px !important;
        overflow-y: auto;
      }
      .body .table-header .td {
        display: flex;
        align-items: center;
      }
      .body .table-body .tr img {
        cursor: pointer;
      }
      .body .table-body .primary {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: #00b42a;
        opacity: 1;
        border-radius: 50%;
        margin-right: 4px;
      }
      .body .table-body .red {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: #f53f3f;
        opacity: 1;
        border-radius: 50%;
        margin-right: 4px;
      }
    </style>
  </head>
  <body>
    <div class="ghcj2" id="app">
      <div class="body">
        <div class="tab-group">
          <div class="tab_button">
            <button @click="onPresaleInformation" class="button_primary_plain">
              售前资料
            </button>
            <button class="button_primary">成本概算审批</button>
          </div>
          <div class="input-btn">
            <div class="input-group">
              <input style="width: 160px" placeholder="请输入资料名称" />
              <label> <img src="./common/img/ghcj2/sosou.png" /> </label>
            </div>
            <div class="select-group">
              <label></label>
              <div class="options">
                <input placeholder="全部类型" style="width: 150px" />
                <ul>
                  <li>全部类型</li>
                  <li>全部类型</li>
                </ul>
              </div>
            </div>
            &ensp;&ensp;
            <button @click="onNewFile" class="button_success_plain">
              <img src="./common/img/ghcj2/xz.png" />&ensp;下载成本概算模板
            </button>
            &ensp;&ensp;
            <button @click="onNewFolder" class="button_warning_plain">
              <img src="./common/img/ghcj2/wenben.png" />&ensp;新建成本概算审批
            </button>
          </div>
        </div>
        <div class="table">
          <div class="table-header">
            <div class="tr">
              <div class="td" style="width: 10%">项目名称</div>
              <div class="td" style="width: 10%">审批类型</div>
              <div class="td" style="width: 10%">数量</div>
              <div class="td" style="width: 10%">金额</div>
              <div class="td" style="width: 10%">成本</div>
              <div class="td" style="width: 10%">采购分类</div>
              <div class="td" style="width: 10%">采购分类</div>
              <div class="td" style="width: 10%">提交时间</div>
              <div class="td" style="width: 10%">审批人</div>
              <div class="td" style="width: 10%">审批状态</div>
              <div class="td" style="width: 10%">操作</div>
            </div>
          </div>
          <div class="table-body">
            <div class="tr" v-for="item in list">
              <div class="td" style="width: 10%">项目名称</div>
              <div class="td" style="width: 10%">项目名称</div>
              <div class="td" style="width: 10%">项目名称</div>
              <div class="td" style="width: 10%">项目名称</div>
              <div class="td" style="width: 10%">项目名称</div>
              <div class="td" style="width: 10%">项目名称</div>
              <div class="td" style="width: 10%">项目名称</div>
              <div class="td" style="width: 10%">项目名称</div>
              <div class="td" style="width: 10%">
                <p><span class="primary"></span>售前：王婷婷</p>
                <p><span class="primary"></span>售前：王婷婷</p>
                <p><span class="red"></span>售前：王婷婷</p>
              </div>
              <div class="td" style="width: 15%">
                <p>售前：王婷婷<span style="color: #00b42a">审批通过</span></p>
                <p>
                  售前：王婷婷<span style="color: #f53f3f">审批不通过</span>
                </p>
              </div>
              <div class="td" style="width: 10%">
                <button class="button_success_text" @click="handle(item)">
                  编辑
                </button>
                &ensp;
                <button class="button_primary_text" @click="handle(item)">
                  查看
                </button>
                &ensp;
                <button class="button_error_text">删除</button>
              </div>
            </div>
          </div>
        </div>
        <div class="pagination">
          <span>共 {{total}} 条</span>
          <ul>
            <li @click="shang"><i class="bi bi-chevron-left"></i></li>
            <li
              v-show="start > 0"
              @click="()=>{
                if(start > 0){
                  params.page = start;
                  end-=3
                  start-=3
                }
              }"
            >
              ...
            </li>
            <li
              @click="onCurrentPage(item)"
              v-for="item in totalPage"
              v-show="item < end && item > start"
              :class="[item == params.page ? 'active' :'']"
            >
              {{item}}
            </li>
            <li
              v-show="end <= totalPage"
              @click="()=>{
                if(end <= totalPage){
                params.page = end;
                end+=3
                start+=3
                }
              }"
            >
              ...
            </li>
            <li @click="next"><i class="bi bi-chevron-right"></i></li>
          </ul>
        </div>
      </div>
      <div id="newFolder_yik">
        <img src="./common/img/ghcj2/wj.png" />
        <div class="content_text">
          <p>某某某某某某项目</p>
          <br />
          <div class="input-group">
            <input
              id="input"
              placeholder="输入文件夹名称"
              style="width: 360px"
            />
          </div>
        </div>
      </div>
      <div id="newFile_yik">
        <p>某某某某某某项目 <img src="./common/img/right.png" /> 资料</p>
        <div class="select-group">
          <div class="options">
            <input placeholder="输入关键字" style="width: 450px" />
            <ul>
              <li>输入关键字</li>
              <li>输入关键字</li>
              <li>输入关键字</li>
              <li>输入关键字</li>
            </ul>
          </div>
        </div>
        <div class="upload">
          <p>支持上传文件为：jpg、pdf、ppt</p>
          <div class="upload-content">
            <img src="./common/img/ghcj2/Group427319875.png" />
            <button id="onUpload" onclick="onUpload">选择文件</button>
            <br />
            <p id="onUploadText"></p>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="./common/js/vue.js"></script>
  <script type="module">
    import { childMessage } from "./common/js/event.js";
    import DiaLog from "./common/js/diaLog.js";
    const { createApp } = Vue;
    //上传文件
    document.getElementById("onUpload").addEventListener("click", () => {
      const input = document.createElement("input");
      input.id = "file";
      input.type = "file";
      document.body.appendChild(input);
      input.click();
      // 上传结束之后，删除此图标
      input.remove();
      input.onchange = function (val) {
        const filePath = val.target.files[0];
        const formData = new FormData();
        formData.append("file", filePath);
        newFile_yik.doc.querySelector("#onUploadText").innerText =
          filePath.name;
      };
    });
    // 新建文件夹弹框
    let newFolder_yik = new DiaLog({
      title: "新建文件夹",
      width: "543px",
      el: "#newFolder_yik",
      cancelText: "取消",
      confirmText: "确定",
      cancel: () => {
        newFolder_yik.hide();
      },
      confirm: (document) => {
        newFolder_yik.hide();
      },
    });
    // 上传资料弹框
    let newFile_yik = new DiaLog({
      title: "上传资料",
      width: "500px",
      el: "#newFile_yik",
      cancelText: "取消",
      confirmText: "确定",
      cancel: () => {
        newFile_yik.hide();
      },
      confirm: (document) => {
        newFile_yik.hide();
      },
    });
    createApp({
      data() {
        return {
          total: 0,
          totalPage: 0,
          start: 0,
          end: 4,
          list: [
            {
              isShow: true,
            },
            {
              isShow: true,
            },
            {
              isShow: true,
            },
          ],
          params: {
            page: 1,
            limit: 10,
          },
        };
      },
      //页面初始化加载
      mounted() {
        console.log("页面初始化加载");
        this.get();
      },
      //所有函数都写在这里
      methods: {
        //售前资料
        onPresaleInformation() {
          childMessage({
            src: "./项目详情（售前）.html",
            type: "page",
          });
        },
        onNewFolder() {
          newFolder_yik.show();
        },
        onNewFile() {
          newFile_yik.show();
        },
        shang() {
          if (this.params.page > 1) this.params.page--;
          if (this.params.page < this.start + 1) {
            this.end -= 3;
            this.start -= 3;
          }
          this.get();
        },
        next() {
          if (this.params.page < this.totalPage) this.params.page++;
          if (this.params.page > this.end - 1) {
            this.end += 3;
            this.start += 3;
          }
          this.get();
        },
        onCurrentPage(page) {
          this.params.page = page;
        },
        //接口
        get() {
          // ajax 请求
          // $.ajax()
          this.totalPage = 10; // 总页数
          this.total = 100; //总条数
        },
      },
    }).mount("#app");
  </script>
</html>
